<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>脚本管理</title>
    <link rel="stylesheet" href="../styles.css" />
    <link rel="stylesheet" href="script-management.css" />
    <style>
      .form-input {
        margin-right: 10px;
      }
      .select-style {
        padding: 5px;
        font-size: 16px;
      }
      input[type="date"] {
        /* 基础样式 */
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: Arial, sans-serif;
        background-color: #fff;
        font-size: 16px;

        /* 隐藏默认图标（部分浏览器有效） */
        appearance: none;
        -webkit-appearance: none;
      }

      /* 聚焦状态 */
      input[type="date"]:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>脚本管理</h1>
      <div class="search-area">
        <div class="search-box">
          <input
            class="form-input"
            type="text"
            placeholder="脚本名称: 请输..."
          />
          <select class="form-input select-style">
            <option>脚本类型: 所有类型</option>
          </select>
          <input class="form-input" type="date" />
          <input class="form-input" type="date" />
          <button class="btn-primary">搜索</button>
        </div>
      </div>
      <div class="script-summary">
        <div>脚本总数: 0 个</div>
        <div
          class="action-buttons"
          style="
            display: flex;
            justify-content: flex-end;
            position: relative;
            top: -25px;
          "
        >
          <button
            class="btn-primary"
            style="margin-right: 10px"
            id="deconstructBtn"
          >
            AI解构脚本
          </button>
          <button class="btn-primary">AI创建脚本</button>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>脚本名称</th>
            <th>创建时间</th>
            <th>时长(s)</th>
            <th>分镜数</th>
            <th>类型</th>
            <th>场景设置</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr class="empty-data">
            <td colspan="7">
              <div class="empty-placeholder">
                <img src="../../assets/images/empty.png" alt="暂无数据" />
                <span>暂无数据</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 弹窗 -->
    <div id="deconstructModal" class="modal">
      <div class="modal-content" style="max-width: 1200px">
        <div class="header">
          <h2>脚本解构</h2>
          <span class="close-btn" id="closeModal">×</span>
        </div>

        <div class="duration">时长：0分钟</div>
        <div
          class="action-links"
          style="display: flex; align-items: center; white-space: nowrap"
        >
          <span>本次任务预计消耗0点</span>
          <button class="btn btn-primary" style="margin-left: 15px">
            解构脚本
          </button>
        </div>

        <div class="input-group">
          <label class="custom-radio">
            <input type="radio" name="input-type" value="file" />
            <span class="radio-icon"></span>
            <label>视频文件：</label>
          </label>
          <input
            type="text"
            class="input-field"
            placeholder="请选择视频文件"
            readonly
          />
        </div>

        <div class="input-group">
          <label class="custom-radio">
            <input type="radio" name="input-type" value="url" checked />
            <span class="radio-icon"></span>
            <label>链接提取：</label>
          </label>
          <input type="text" class="input-field" placeholder="请输入视频链接" />
        </div>

        <div
          class="info-box"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span>总分镜数: 0 总时长: 1.00 秒 实际预估时长: NaN秒</span>
          <button class="btn btn-primary">新增分镜</button>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label><span class="required">*</span>脚本名称：</label>
            <input type="text" class="input-field" placeholder="请输入" />
          </div>
          <div
            class="form-group"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 10px;
            "
          >
            <label style="margin-top: 8px"
              ><span class="required">*</span>配音角色：</label
            >
            <span>云希</span>
            <button style='margin-left: 10px;' class="btn btn-default">选择角色</button>
          </div>
          <div class="form-group">
            <label><span class="required">*</span>配音导出目录：</label>
            <input type="text" class="input-field" placeholder="请选择" />
          </div>
        </div>

        <button class="btn btn-primary">保存脚本</button>

        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>分镜名</th>
              <th>时长(s)</th>
              <th>景别</th>
              <th>分镜描述</th>
              <th>分镜参考</th>
              <th>文案</th>
              <th>操作</th>
            </tr>
          </thead>
        </table>

        <div class="empty-state">
          <img
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-cYHnC94wqzvgjXKXEMMkxluoT9eNRj.png"
            alt="No data"
          />
          <p>暂无数据</p>
        </div>
      </div>
    </div>

    <script src="script-management.js"></script>
  </body>
</html>
